<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./point.js"></script>
    <script src="./svga.min.js"></script>
    <style>
        body {
            margin: 0;
        }

        .svgaPage{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color:rgba(0,0,0,.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #svgaBox{
            width: 256px;
            height: 256px;
	    }

        .component {
            background:rgba(0,0,0,.8);
            color: #fff;
            box-sizing: border-box;
        }

        .bg {
            position: absolute;
            width: 100%;
			height: 430px;
			align-items: center;
			justify-content: center;
        }

        .lotterybg {
			margin: 0 auto;
            background-size: contain;
            overflow: visible;
            width: 100%;
            /* height: 100%; */
            height: 430px;
			max-width: 410px;
            background-position: center center!important;
        }

        #myCanvas {
            position: absolute;
            border: none;
        }

        #start {
            position: absolute;
            z-index: 3;
            width: 50px;
            margin-top: 370px;
            margin-left: 50%;
        }

        .imgSrc {
            display: none;
            position: absolute;
        }

        #award {
            position: absolute;
            border: none;
        }

        .awardImgUrl {
            width: 100%;
            height: 100%
        }

        #awardBall {
            display: none
        }

        .dropBall {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: block;
            background-size: contain;
            animation: drop 1s ease-out forwards;
            -webkit-animation: drop 1s ease-out forwards;
        }

        @keyframes drop {
            0% {
                transform: scale(0.7);
            }

            50% {
                transform: scale(1);
            }

            51% {
                transform: translateY(0px);
            }

            100% {
                transform: translateY(10px);
            }
        }

        @-webkit-keyframes drop {
            0% {
                -webkit-transform: scale(0.7);
            }

            50% {
                -webkit-transform: scale(1);
            }

            51% {
                -webkit-transform: translateY(0px);
            }

            100% {
                -webkit-transform: translateY(10px);
            }
        }

        .top_title {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .top_title_name {
            color: #d8ceb3;
            max-width: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .main {
            padding-top: 430px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .main_left {
            position: absolute;
            left: 15px;
            top: 20px;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
        }

        .progress {
            height: 200px;
            width: 20px;
            border-radius: 20px;
            box-sizing: border-box;
            border: 3px solid #6a6a6a;
            display: flex;
            flex-direction: column;
            /* align-items: flex-end; */
            justify-content: flex-end;
        }

        .linearColorsame {
            width: 100%;
            height: 180px;
            background: #feffd5;
            border-radius: 20px;
            box-shadow: 0px 0px 16px 6px #e0d561;
        }

        .open_btn {
            padding: 2px 8px;
            border-radius: 50px;
            background-color: #2a1c40;
        }

        /* 主体右侧 */
        .main_right {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .main_right_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 15px;
        }

        .main_right_item img {
            width: 30px;
            height: 30px;
        }

        .main_right_item span {
            font-size: 12px;
            margin-top: 10px;
        }

        .main_bottom {
            position: absolute;
            margin: 0 auto;
			width: 320px;
			height: 46px;
        }

        .turntable_footer {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .surplus {
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }

        .surplus div {
            margin-right: 15px;
        }

        .surplus_gain {
            width: 77px;
            height: 26px;
            background: #D73D3D;
            border-radius: 36px;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            line-height: 26px;
            margin-left: 46px;
        }

        .surplus_btns {
            width: 311px;
            height: 50px;
            background: linear-gradient(127deg, #005ACD 0%, #FFEDAD 100%);
            box-shadow: inset 3px 3px 3px 1px #FFFFFF;
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            /* display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box; */
        }

        /* .surplus_btn{
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #762c8b;
    border-radius: 100px;
    padding: 6px 0;
} */
        .turntable_popup {
            position: fixed;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            height: auto;
            background: #FFFFFF;
            box-shadow: 0 1px 3px 1px rgba(0,0,0,0.16);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            color: #333333;
            box-sizing: border-box;
            padding: 10px 0;
        }

        .turntable_popup_btn {
            width: 200px;
            height: 44px;
            background: linear-gradient(122deg, #FD5A85 0%, #FFDE6B 100%);
            border-radius: 28px;
            font-size: 16px;
            color: #FFFFFF;
            text-align: center;
            line-height: 44px;
        }
    </style>
</head>

<body>
    <div class="component" id="app">
        <div class="bg">
            <div class="lotterybg" :style="`background: url(`+canvasUrl+`) no-repeat center;background-size: `+ bgSize +`% auto;`">
                <canvas :style="canvasStyle" id="myCanvas"></canvas>
                <div id="award" :style="awardStyle">
                    <span id="awardBall" :style="`background: url(`+awardImgUrl+`)center center / cover no-repeat`"></span>
                </div>
            </div>
        </div>
        <!-- <div v-for="(item,index) in prizeList" :key="index"> -->
        <!-- <div v-for="(item,index) in fakeDataSource" :key="index">
            <img :src="item.picUrl" class="imgSrc" />
        </div> -->
        <div>
            <img src="./images/nd_1.png" class="imgSrc" />
        </div>
        <div>
            <img src="./images/nd_2.png" class="imgSrc" />
        </div>
        <div>
            <img src="./images/nd_3.png" class="imgSrc" />
        </div>
        <div>
            <img src="./images/nd_3.png" class="imgSrc" />
        </div>
        <div>
            <img src="./images/nd_3.png" class="imgSrc" />
        </div>
        <div>
            <img src="./images/nd_2.png" class="imgSrc" />
        </div>
        <div>
            <img src="./images/nd_1.png" class="imgSrc" />
        </div>
        <div>
            <img src="./images/nd_2.png" class="imgSrc" />
        </div>
        <div>
            <img src="./images/nd_1.png" class="imgSrc" />
        </div>
        <div>
            <img src="./images/nd_3.png" class="imgSrc" />
        </div>
        <!-- <img src="https://t7.baidu.com/it/u=547832634,1492983879&fm=193" id="start" @click="play" /> -->
        

        <!-- <div>
            <div class="top_title">
                <div class="top_title_name">{{name}}</div>
                <div>在秋日物语获得</div>
                <div style="color:#d8ceb3;">{{prize}}</div>
            </div>
        </div> -->

        <div class="main">
            <div class="main_left">
                <!-- <div class="progress">
                    <div class="linearColorsame" :style="{height:height}"></div>
                </div>
                <div style="color:#fcf570">{{height}}</div>
                <div style="color:#948ca1;margin: 8px 0;">暴走值</div> -->
            </div>

            <div class="main_right">
                <div class="main_right_item" @click="appCall('GiftList')">
                    <img src="./images/16@2x.png" alt="">
                    <span>奖品</span>
                </div>
                <div class="main_right_item" @click="appCall('GiftHistory')">
                    <img src="./images/15@2x.png" alt="">
                    <span>中奖纪录</span>
                </div>
                <div class="main_right_item" @click="appCall('GiftRule')">
                    <img src="./images/14@2x.png" alt="">
                    <span>规则</span>
                </div>
            </div>

            <div class="surplus main_bottom" :style="bottomStyle">
                <div style="margin-left: 5%">
                    <span >我的钻石：</span>
                    <span>{{num}}</span>
                </div>
                <div @click="recharge" class="surplus_gain">获取</div>
            </div>

        </div>

        <div>
            <div class="turntable_footer">

                <!-- <div @click="play" class="surplus_btns">
                    <span style="font-size: 18px;">3000</span>
                    <img src="./images/24@2x.png" mode="" style="width: 16px;height: 12px;margin-left: 12px;">
                    </img>
                    <span style="font-size: 12px;">/1次</span>
                </div> -->

                <div
                    style="display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 0 14px;box-sizing: border-box;">
                    <div @click="play(1)"
                        style="color: #fff;background-color: #6a6cfe;border-radius: 8px;flex: 1;margin-right: 14px;padding: 8px 0;">
                        <div style="display: flex;align-items: center;justify-content: center;">
                            <div>抽一次</div>
                            <span style="margin-left: 5px;font-size: 12px;">300</span>
                            <img src="./images/24@2x.png" mode="" style="width: 16px;height: 13px;margin-left: 7px;">
                        </div>
                        <div style="display: flex;align-items: center;justify-content: center;">
                            <img src="./images/gift.png" mode="" style="width: 22px;height: 22px;margin-right: 7px;">
                            <div style="font-size: 12px;">x1</div>
                        </div>
                    </div>
                    <div @click="play(2)"
                        style="color: #fff;background-color: #6a6cfe;border-radius: 8px;flex: 1;padding: 8px 0;">
                        <div style="display: flex;align-items: center;justify-content: center;">
                            <div>抽十次</div>
                            <span style="margin-left: 5px;font-size: 12px;">3000</span>
                            <img src="./images/24@2x.png" mode="" style="width: 16px;height: 13px;margin-left: 7px;">
                        </div>
                        <div style="display: flex;align-items: center;justify-content: center;">
                            <img src="./images/gift.png" mode="" style="width: 22px;height: 22px;margin-right: 7px;">
                            <div style="font-size: 12px;">x10</div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- <div style="display: flex;align-items: center;justify-content: center;">
                <img src="https://img1.baidu.com/it/u=1804279119,998853692&fm=253&fmt=auto&app=138&f=JPEG?w=498&h=500" alt="" style="width: 10px;height: 10px;">
                <div>
                    <span>剩余欢乐券：</span>
                    <span>4</span>
                </div>
                <div>
                    <div>获取换了券</div>
                    <img src="" alt="">
                </div>
            </div>
            <div style="display: flex;align-items: center;justify-content: center;">
                <div style="display: flex;align-items: center;justify-content: center;">
                    <div>
                        <div>1次</div>
                        <div>1欢乐券</div>
                    </div>
                    <div>
                        <div>10次</div>
                        <div>10欢乐券</div>
                    </div>
                    <div>
                        <div>100次</div>
                        <div>100欢乐券</div>
                    </div>
                </div>
                <div @click="play">
                    <div>开始</div>
                    <div>start</div>
                </div>
            </div> -->
        </div>

        <div class="turntable_popup" v-if="turntable_popup_show">
            <div>手气不错</div>
            <div style="color: #999999;">恭喜获得奖励,可在背包里查看</div>
            <div style="width: 88px;
        		        height: 88px;
        		        background: #413354;
        		        border-radius: 4px;
        		        display: flex;
        		        align-items: center;
        		        justify-content: center;">
                <!-- <div id="one"></div> -->
                <img :src="zhongjiang.imgs[0].src" style="width: 75px;height: 75px;">
                <!-- <img src="http://yunliaos.oss-cn-beijing.aliyuncs.com/image/18fdb54bee96456b9d586288b8cdb088.jpg"
                    style="width: 75px;height: 75px;"> -->
            </div>
            <div style="text-align: center;">
                <div>{{zhongjiang.giftname}}</div>
                <div style="color: #999999;">{{zhongjiang.goldmoney}}钻石</div>
            </div>
            <div @click="turntable_popup_show=false" class="turntable_popup_btn">确定</div>
        </div>

        <div class="turntable_popup" style="height: auto;" v-if="prizes_arr_show">
            <div style="color: #999999;">恭喜获得奖励,可在背包里查看</div>
            <div>总价值：{{total_value}}</div>
            <div style="display: flex;flex-wrap: wrap;">
                <div style="display: flex;
        			flex-direction: column;
        			align-items: center;
        			justify-content: flex-start;
        			width: 20%;
        			margin: 6px 6px;
        			height: 90px;" v-for="(item,index) in prizes_arr" :key="index">
                    <div style="width: 44px;
        			    height: 44px;
        			    background: #413354;
        			    border-radius: 4px;
        			    display: flex;
        			    align-items: center;
        			    justify-content: center;">
                        <img :src="item.imgs[0].src" style="width: 35px;height: 35px;">
                    </div>
                    <div style="text-align: center;">
                        <div style="font-size: 12px;">{{item.giftname}}x{{item.giftnum}}</div>
                        <div style="color: #999999;font-size: 12px;">{{item.goldmoney*item.giftnum}}钻</div>
                    </div>
                </div>
            </div>
            <div @click="prizes_arr_show=false" class="turntable_popup_btn">确定</div>
        </div>

        <div class="svgaPage" v-if="svga_status">
            <div id="svgaBox" @click="jump()"></div>
        </div>

    </div>

    <script>
        new Vue({
            el: '#app',
            // 第三步   挂载组件
            props: {
                canvasUrl: {
                    editor: {
                        type: 'image',
                        label: '扭蛋机背景图',
                    },
                    type: String,
                    default: './images/5@2x.png',
                },
                isData: {
                    type: Boolean,
                    default: false,
                    editor: {
                        type: 'boolean',
                        label: '是否数据源'
                    }
                },
                dataScoped: {
                    type: String,
                    default: '',
                    editor: {
                        type: 'string',
                        label: '数据源名称（dataHub）'
                    }
                },
                imgUrl: {
                    type: Array,
                    default() {
                        return [
                            {
                                url: 'https://vueweb.oss-cn-qingdao.aliyuncs.com/vueweb/resource/ymm_1632810357807.png'
                            }
                        ]
                    },
                    editor: {
                        ignore: true
                    }
                },
                canvasWidth: {
                    default: 220,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋区域的宽',
                    }
                },
                canvasHeight: {
                    default: 214,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋区域的高',
                    }
                },
                canvasTop: {
                    default: 55,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋区域距离顶部的距离',
                    }
                },
                canvasLeft: {
                    default: 26,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋区域距离左侧的值',
                    }
                },
                canvasBorderRadius: {
                    default: '200px',
                    type: String,
                    editor: {
                        type: 'string',
                        label: '扭蛋区域的圆角',
                    }
                },
                canvasPadding: {
                    default: 20,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋区域内边距',
                    }
                },
                ballWidth: {
                    default: 65,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋宽',
                    }
                },
                ballHeight: {
                    default: 66,
                    type: Number,
                    editor: {
                        type: 'number',
                        label: '扭蛋高',
                    }
                },
                awardPosition: {
                    type: String,
                    default: 'width: 50px;height: 50px;top: 248px;right:8%',
                    editor: {
                        type: 'string',
                        label: '出口位置'
                    }
                },
                functionPop: {
                    type: String,
                    editor: {
                        type: 'string',
                        label: '抽奖完成奖品弹出框方法:',
                    },
                },
            },
            computed: {
                // 数据源列表
                prizeList() {
                    if (this.isData) {
                        if (!this.isEmpty(this.$parent.DataHub) && !this.isEmpty(this.$parent.DataHub[this.dataScoped])) {
                            return this.$parent.DataHub[this.dataScoped]
                        } else {
                            return []
                        }
                    } else {
                        return this.fakeDataSource
                    }
                },
				bottomStyle() {
					let style = {
					    bottom: this.viewBottom + 'px',
						width: this.viewWidth + 'px',
						height: this.viewHeight + 'px',
						fontSize: this.viewFont + 'px'
					}
					return style
				},
				buttonStyle() {
					let style = {
						width: this.viewWidth + 'px',
						height: this.viewHeight + 'px',
						fontSize: this.viewFont + 'px'
					}
					return style
				},
                canvasStyle() {
                    let style = {
                        top: '55px', 
                        // left: this.canvasLeft + 'px',
                        left: '50%',
                        transform: 'translateX(-50%)',
                        borderRadius: this.canvasBorderRadius,
                        padding: this.canvasPadding + 'px',
                    }
                    return style
                },
                awardStyle() {
                    return `${this.awardPosition};color:${this.itemTextColor};`
                },
            },
            data() {
                return {
                    token: '',
                    baseUrl: '',
                    roomid:'',
                    userId:'',
                    num: 0,
                    prizes:[],
                    turntable_popup_show: false,
                    height: '50%',
					bgSize: 90,
					viewBottom: 20,
					viewWidth: 320,
					viewHeight: 46,
					viewFont: 16,
                    name: '湿湿/分分分那你发',
                    prize: '时空守护（16666）x 1',
                    zhongjiang:[],
                    status: true,
                    svga_status: false,
                    canvas: '',
                    ctx: '',
                    ballList: [],
                    ballNum: '',// 扭蛋机里面的小球数
                    awardList: [],
                    scale: 1,
                    fakeDataSource: [
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/5.png',
                        },
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/7.png',
                        },
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/6.png',
                        }, {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/5.png',
                        },
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/5.png',
                        },
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/7.png',
                        },
                        {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/6.png',
                        }, {
                            'picUrl': 'https://vueweb.oss-cn-qingdao.aliyuncs.com/platform/5.png',
                        },
                    ],
                    awardImgUrl: './images/nd_3.png',


                    prizes_arr: [],
                    prizes_arr_show: false,
                    prizes_status: 1,//1单抽，2-10连抽, 3-100连抽
                    total_value:0,//总价值
                }
            },
            created() {
                var reg = new RegExp('(^|&)' + 'token' + '=([^&]*)(&|$)', 'i');
                var reg1 = new RegExp('(^|&)' + 'baseUrl' + '=([^&]*)(&|$)', 'i');
                var reg2 = new RegExp('(^|&)' + 'roomid' + '=([^&]*)(&|$)', 'i');
                var reg3 = new RegExp('(^|&)' + 'userId' + '=([^&]*)(&|$)', 'i');
                var r = window.location.search.substr(1).match(reg);
                var r1 = window.location.search.substr(1).match(reg1);
                var r2 = window.location.search.substr(1).match(reg2);
                var r3 = window.location.search.substr(1).match(reg3);
				if (r) {
					this.token = r[2] ||'11111111';
				}
				if (r1) {
					// 参数中的连接经过转义，需要进行解码
					this.baseUrl = decodeURIComponent(r1[2]) || 'http://192.168.1.25:8182';
				}
				if (r2) {
					this.roomid = r2[2] || 1;
				}
				if (r3) {
					this.userId = r3[2] || 1;
				}
            },
            editorMethods: {
            },
            watch: {
            },
            mounted() {
                this.demo();
                this.getInfo();
                this.get_giftAll();
            },
            methods: {
                recharge() {
                    let obj = {}
                    window.appExt.sendEvent("Recharge", JSON.stringify(obj))
                },
				appCall(name){
					let obj = {}
					if (window.appExt) {
						window.appExt.sendEvent(name, JSON.stringify(obj))
					}
				},
                show_svga(svga) {
                    //svga的播放情况
                    let that = this;
                    // let SVGA = require('./svga.min.js')
                    const player = new SVGA.Player('#svgaBox');
                    var parser = new SVGA.Parser('#svgaBox');
                    //注意，这里必须是服务器地址，否则报错
                    let svg = svga || 'https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga'
                    parser.load(svg, function (videoItem) {
                        player.loops = 1;  // 设置循环播放次数是1
                        player.setVideoItem(videoItem);
                        player.startAnimation();
                        player.onFinished(() => {
                            that.svga_status = false;
                        })
                    });
                },
                getInfo(){
                    axios({
                        headers: {
                            Authorization: this.token,
                            'Content-Type': 'application/json'
                        },
                        method: 'post',
                        url: this.baseUrl + "/app/prize/UserEnergyAndDiamonds",
                        params: {
                            userId: this.userId,
							diamonds: 300,
							gamestatus: 3,
                        }
                    }).then((res) => {
						if (res.data.data) {
							this.num = res.data.data[0];
							this.height = res.data.data[1] + '%';
							// this.status = res.data.data[2];
							// if (!res.data.data[2]) {
							//     this.$message({
							//         message: res.data.data[3],
							//         type: 'error'
							//     })
							// }
						}
                    });

                },

                get_giftAll(){
                    // 获取礼物列表
                    axios({
                        headers: {
                            Authorization: this.token,
                            "content-type": 'application/json'
                        },
                        url: this.baseUrl + "/app/prize/giftAll",
                        params: {
                            gamestatus: 3
                        },
                    }).then((res) => {
                        res.data.data.map((item, index) => {
                            this.prizes.push({
                                id: item.id,
                                giftname: item.giftname,
                                giftZuanShi: item.zuanshi,
                                goldmoney: item.goldmoney,
                                background: '#FFEDCA',
                                imgs: [{
                                    src: item.picture,
                                    top: '5rpx',
                                    width: '110rpx',
                                    height: '110rpx',
                                    svga: item.svgaaddress
                                }],
                            })
                        })
                    });
                },

                demo() {
                    this.canvas = document.getElementById('myCanvas')
                    this.scale = window.devicePixelRatio
                    this.canvas.width = this.canvasWidth * this.scale
                    this.canvas.height = this.canvasHeight * this.scale
                    this.canvas.style.width = this.canvas.width / this.scale + 'px'
                    this.canvas.style.height = this.canvas.height / this.scale + 'px'
                    this.ctx = this.canvas.getContext('2d')
                    this.ballList = Array.from(document.getElementsByClassName('imgSrc'))
                    this.ballNum = this.ballList.length // 扭蛋机里面的小球数
                    setTimeout(() => {
                        for (let i = 0; i < this.ballNum; i++) { // 随机生成各色小球
                            this.awardList[i] = new Ball(this.canvas, this.ballList[i], this.ballWidth, this.ballHeight, i) // 新建小球对象
                        }
                    })
					// 计算钻石文本和底部的距离
					let windowWidth = document.documentElement.clientWidth;
					let windowHeight = 430;
					let imgScale = 1342/1410;
					let realScale = windowWidth/430;
					// 背景的比例为0.93
					let imgSize = this.bgSize/100;
					// 原始基准为80
					let sizeScale = this.bgSize/80;
					// 显示区域宽高比大于图片宽高比，显示固定属性
					if (realScale >= imgScale) {
						// 宽度比较大，按照高度来计算
						let imgHeihgt = 430*imgSize;
						this.viewWidth = 320*sizeScale;
						this.viewHeight = 46*sizeScale;
						this.viewBottom = 430*(1-imgSize)/2+3*sizeScale;
					} else {
						// 宽度比较小，按照宽度来计算
						let imgHeihgt = windowWidth*imgSize/imgScale;
						let realImgWidth = windowWidth*imgSize;
						let maxImgWidth = 430*imgSize*imgScale;
						let widthScale = realImgWidth/maxImgWidth;
						this.viewWidth = widthScale*320*sizeScale;
						let heightScale = (realImgWidth/imgScale)/(430*imgSize);
						this.viewHeight = heightScale*46*sizeScale;
						this.viewBottom = (430 - imgHeihgt)/2 + 3*sizeScale;
						// 字体缩放
						this.viewFont = widthScale*16;	
					}
					
                },
                isEmpty(str) {
                    if (typeof str == 'undefined' || str == null || str == '') {
                        return true
                    } else {
                        return false
                    }
                },
                play(status) {
                    if (this.status) {
                        this.status = false;
                    } else {
                        return;
                    }
                    this.prizes_status = status;
                    if(this.prizes_status==1){
                        if(this.num < 300) {
                            alert("砖石不足");
                            return;
                        };
                    } else if(this.prizes_status==2){
                        if (this.num < 3000) {
                            alert("砖石不足");
                            return;
                        };
                    }
                    this.status = false;
                    let random = Math.floor(Math.random() * 3) + 1;
                    this.awardImgUrl = './images/nd_' + random + '.png'
                    var award = document.getElementById('awardBall')
                    award.removeAttribute('class', 'dropBall')
                    if (this.awardList.length === 0) { // 奖池中没有小球
                        this.init()
                    } else {
                        window.clearInterval(this.timer) // 清除计时器
                        this.timer = setInterval(() => {
                            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // 清空画布
                            for (let i = 0; i < this.awardList.length; i++) {
                                this.awardList[i].run(this.ctx, this.canvas, this.ballWidth, this.ballHeight)
                            } // 使小球运动
                        }, 15)
                        this.clear()
                    }
                },
                init() { // 初始化
                    for (let i = 0; i < this.ballNum; i++) { // 随机生成各色小球
                        let index = Math.floor(4 * Math.random())
                        this.awardList[i] = new Ball(this.canvas, index, this.ballList[index]) // 新建小球对象
                    }
                    window.clearInterval(this.timer) // 清除计时器
                    this.timer = setInterval(() => {
                        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // 清空画布
                        for (let i = 0; i < this.awardList.length; i++) {
                            this.awardList[i].run(this.ctx, this.canvas, this.ballWidth, this.ballHeight)
                        } // 使小球运动
                    }, 100)
                    this.clear()
                },
                clear() {
                    var award = document.getElementById('awardBall')
                    document.getElementById('awardBall').style.display = 'inline'
                    setTimeout(() => {
                        window.clearInterval(this.timer) // 清除计时器
                        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // 清空画布
                        for (let i = 0; i < this.ballNum; i++) { // 随机生成各色小球
                            this.awardList[i] = new Ball(this.canvas, this.ballList[i], this.ballWidth, this.ballHeight, i) // 新建小球对象
                        }
                        award.setAttribute('class', 'dropBall')
                        if(this.prizes_status ==1){
                            // prizes_status == 1单抽
                            axios({
                                headers: {
                                    Authorization: this.token,
                                    'Content-Type': 'application/json'
                                },
                                method: 'post',
                                url: this.baseUrl + "/app/prize/StartTheLottery",
                                data: {
                                    userId: this.userId,
                                    roomid: this.roomid,
                                    count: 1,
                                    diamond: 300,
                                    gamestatus: 3
                                },
                            }).then((res) => {
                                // this.zhongjiang = res.data.data;
                                this.getInfo();
                                this.turntable_popup_show = true;
                                this.status = true;

                                // this.getInfo();
                                this.prizes.map((item, index) => {
                                    if (item.id == res.data.data) {
                                        this.zhongjiang = item;
                                    }
                                })
                                // if(res.data.code==0){
                                //     this.svga_status = true;
                                //     setTimeout(() => {
                                //         this.show_svga(this.zhongjiang.imgs[0].svga);
                                //     }, 500);
                                // }
                                let obj = { giftMsg: `抽到礼物【${this.zhongjiang.giftname}】` }
                                window.appExt.sendEvent("GetGift", JSON.stringify(obj))
                            });
                        } else {
                            axios({
                                headers: {
                                    Authorization: this.token,
                                    'Content-Type': 'application/json'
                                },
                                method: 'post',
                                url: this.baseUrl + "/app/prize/ManyTheLotteryCount",
                                data: {
                                    userId: this.userId,
                                    roomid: this.roomid,
                                    count: 1,
                                    diamond: 300,
                                    gamestatus: 3,
                                    number: 10,
                                },
                            }).then((res) => {
                                // this.zhongjiang = res.data.data;
                                let name = ""
                                this.getInfo();
                                this.prizes_arr_show = true;
                                this.status = true;

                                this.prizes_arr = [];
                                this.total_value=0;
                                res.data.data.map((item,index) => {
                                    //处理对象
                                    this.prizes_arr.push({
                                        id:item.id,
                                        giftname:item.giftname,
                                        giftZuanShi:item.zuanshi,
                                        goldmoney:item.goldmoney,
                                        giftnum:item.giftnum,
                                        background:'#FFEDCA',
                                        imgs:[{
                                            src:item.picture,
                                            top:'5px',
                                            width:'150rpx',
                                            height:'150rpx',
                                            svga:item.svgaaddress
                                        }],
                                    })
                                    //处理名称
                                    if(index == res.data.data.length-1){
                                        name += `${item.giftname}x${item.giftnum}`
                                    } else{
                                        name += `${item.giftname}x${item.giftnum}、`
                                    }
                                    //处理总价值
                                    this.total_value +=item.goldmoney*item.giftnum
                                })

                                let obj = { giftMsg: `抽到礼物【${name}】` }
                                console.log(obj);
                                window.appExt.sendEvent("GetGift", JSON.stringify(obj))


                                // if(res.data.code==0){
                                //     this.svga_status = true;
                                //     setTimeout(() => {
                                //         this.show_svga(this.zhongjiang.imgs[0].svga);
                                //     }, 500);
                                // }

                                // let obj = { giftMsg: `抽到礼物【${this.zhongjiang.giftname}】` }
                                // window.appExt.sendEvent("GetGift", JSON.stringify(obj))
                            });
                        }
                        
                    }, 1500)
                    let that = this
                    setTimeout(() => {
                        if (!that.functionPop) {
                            return
                        }
                        eval(`that.${that.functionPop}()`)
                    }, 1600)
                }
            }
        })
    </script>

</body>

</html>